import styles from './index.module.scss'
import Icon from '@/components/Icon'
import { Dialog, Toast } from 'antd-mobile'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useAppSelector } from '@/store'
import { setArticleDislikes, setArticleMark, setArticleReports } from '@/store/action/article'

export default function ArticleMark() {
  const [type, setType] = useState<'junk' | ''>('')
  // 菜单类型  junk 为反馈垃圾内容面板
  // 举报反馈菜单
  const reports = [
    { type: '0', title: '其他问题' },
    { type: '1', title: '标题夸张' },
    { type: '2', title: '低俗色情' },
    { type: '3', title: '错别字多' },
    { type: '4', title: '旧闻重复' },
    { type: '5', title: '广告软文' },
    { type: '6', title: '内容不适' },
    { type: '7', title: '涉嫌违法犯罪' },
    { type: '8', title: '侵权' },
  ]

  const { mark } = useAppSelector((state) => state.article)
  const dispatch = useDispatch()

  // 关闭对话框
  const handleClose = () => {
    console.log('点击了遮罩层，需要实现关闭')
    // 隐藏对话框
    dispatch(setArticleMark({ visible: false }))
    // 把对话框变回默认状态
    setType('')
  }

  // 点击了不感兴趣
  const handleDislike = async () => {
    // console.log('点击了不喜欢', mark.article_id)
    // 发送请求让后端更新文章的标记为不喜欢
    await dispatch(setArticleDislikes(mark.article_id))
    // 提示用户
    Toast.show({ content: '操作成功', duration: 1000 })
    // 关闭 Dialog
    handleClose()
  }

  // 点击文章举报
  const handleReport = async (type: string) => {
    // console.log('点击了文章举报', type, mark.article_id)
    // 举报文章
    await dispatch(setArticleReports({ target: mark.article_id, type }))
    // 提示用户
    Toast.show({ content: '举报成功', duration: 1000 })
    // 关闭 Dialog
    handleClose()
  }

  return (
    <Dialog
      bodyClassName={styles.root}
      visible={mark.visible}
      onClose={handleClose}
      closeOnMaskClick
      content={
        <div className='more-action'>
          {/* 默认菜单内容 */}
          <div hidden={type === 'junk'}>
            <div className='action-item' onClick={handleDislike}>
              <Icon type='iconicon_unenjoy1' /> 不感兴趣
            </div>
            <div className='action-item' onClick={() => setType('junk')}>
              <Icon type='iconicon_feedback1' />
              <span className='text'>反馈垃圾内容</span>
              <Icon type='iconbtn_right' />
            </div>
            <div className='action-item'>
              <Icon type='iconicon_blacklist' /> 拉黑作者
            </div>
          </div>

          {/* 反馈垃圾内容 */}
          <div hidden={type !== 'junk'}>
            <div className='action-item' onClick={() => setType('')}>
              <Icon type='iconfanhui' />
              <span className='back-text'>返回</span>
            </div>
            {reports.map((item) => (
              <div key={item.type} className='action-item' onClick={() => handleReport(item.type)}>
                {item.title}
              </div>
            ))}
          </div>
        </div>
      }
    />
  )
}
